<template>
  <div class="w-[100%] h-[100%]" v-if="isGetData">

    <div class="topModule bg w-[1554px] h-[184px] bg"
         style="background-image: url(https://img.alicdn.com/imgextra/i4/801089336/O1CN012cmOU02IpwkMm7ReY_!!801089336.png)">
      <div class="left w-[1030px] mr-[43px] ">
        <div class="bg h-[150px] pt-[30px] pl-[30px] flex"
             style="">
          <div class="avatar bg w-[58px] h-[58px] mr-[14px]"
               style="background-image: url(https://img.alicdn.com/imgextra/i3/801089336/O1CN017tKlWX2IpwkBx9PHU_!!801089336.png)"></div>

          <div>
            <div class="title text-[18px] mt-[5px]">开通账号：咿呀呀哟~</div>
            <div class="text-[14px] text-[#524E74] bg flex-center w-[58px] h-[22px] mt-[5px]">未开通
            </div>
          </div>

        </div>

      </div>

    </div>

    <div class="flex">

      <div class="left w-[1030px] mr-[43px]  px-[30px] ">

        <div class="mt-[30px] rounded-[8px]">


          <div class="mt-[30px]">
            <el-scrollbar>
              <div class="flex">
                <div
                  v-for="(item,index) in config"
                  :key="index"
                  @click="handleBtnClick({type:'module',index})"
                >
                  <div class="w-[228px] h-[235px] bg relative transition"
                       :style="`background-image:url(${ activeConfig == index ? 'https://img.alicdn.com/imgextra/i2/801089336/O1CN01ZFKX7m2IpwkNEFAZv_!!801089336.png' : 'https://img.alicdn.com/imgextra/i2/801089336/O1CN01fhwD542IpwkLmq7SA_!!801089336.png' })`"


                  >


                    <div class="title pt-[25px] text-[#1a024e] flex-center">
                      {{ item.name }}
                    </div>

                    <div class="flex items-end flex-center mt-[25px]"
                         style="align-items: flex-end;">
                      <div class="flex items-end ">
                        <div class="text-[#f03e00] text-[16px]">￥</div>
                        <div class="text-[#f03e00] text-[30px]">{{ item.discountPrice || 0 }}</div>
                      </div>


                      <div class="flex items-end ">
                        <div class="text-[#999999] text-[16px]">￥{{ item.originalPrice }}</div>
                      </div>
                    </div>

                    <div class="text-[12px] text-[#999999] mt-[25px] flex-center">
                      有效期为{{ item.limitedDuration }}个月
                    </div>

                    <div
                      class="w-[100%] h-[45px] pb-[15px] flex-center absolute bottom-[0] left-[0] text-[#291556]"
                      style="box-sizing: content-box">
                      赠送{{ Math.floor(item.dataValue / (1024 * 1024) * 100) / 100 }}G流量
                    </div>


                  </div>
                </div>

              </div>

            </el-scrollbar>

          </div>

          <div class="mt-[20px] w-[966px] h-[146px] bg"
               style="background-image: url(https://img.alicdn.com/imgextra/i1/801089336/O1CN01B7vth32IpwkLpf8bx_!!801089336.png);background-size: contain;">

          </div>

          <div class="line flex-center">
            <div class="w-[922px] h-[1px] bg-[#F5F5F5]"></div>
          </div>

          <div class="mt-[30px] flex justify-between">

            <div class="flex">

              <div>

                <div>
                  <div class="flex">
                    <div class="font-bold">已选服务：</div>
                    <div class="">{{ config[activeConfig].name }}</div>
                  </div>
                </div>
                <div class="mt-[20px]">

                  <div class="flex">
                    <div class="font-bold">开通周期：</div>
                    <div class="">{{ config[activeConfig].limitedDuration || 1 }}个月</div>
                  </div>
                </div>

                <div class="mt-[20px]">
                  <div class="flex">
                    <div class="font-bold">到期时间：</div>
                    <div class="">{{
                        dayjs().add(config[activeConfig].limitedDuration || 1, 'month').format('YYYY-MM-DD')
                      }}
                    </div>
                  </div>
                </div>

              </div>

            </div>
            <div class="flex" style="align-items: flex-end;align-content: flex-end;">
              <span class="font-bold text-[#101010] text-[18px]">实付金额： </span>

              <span class="text-[#f03e00]">￥</span>

              <span class="text-[32px] font-bold mb-[-5px] text-[#f03e00]">{{
                  config[activeConfig].discountPrice || 0
                }}</span>

              <span class="text-[#999999] ml-[12px]"
                    style="text-decoration: line-through">￥{{
                  config[activeConfig].originalPrice || 0
                }}</span>


              <el-button color="#3a24ff" round class="ml-[25px]"
                         @click="handleBtnClick({type:'payNow'})">立即支付
              </el-button>
            </div>

          </div>

        </div>
      </div>

      <div class="right w-[480px]">
        <div class="text-[20px]">账户余额</div>
        <div class="mt-[30px] rounded-[8px] px-[20px] py-[20px]"
             style="border: solid 1px rgba(55,33,255,0.03);overflow: hidden;">
          <div class="">账户总余额（元）</div>

          <div class="flex mt-[15px]" style="align-items: flex-end;">
            <div>￥</div>
            <div class="text-[24px] font-bold">
              {{
                (countInfo.balance).indexOf('.') != -1 ? (countInfo.balance.split('.')[0]) : countInfo.balance
              }}
            </div>
            <div class="text-[14px] font-bold" v-if="(countInfo.balance).indexOf('.') != -1">
              .{{ countInfo.balance.split('.')[1] }}
            </div>
          </div>

          <div class="mt-[20px]">
            <el-button type="primary" size="large" class="w-[95px]" color="#3721FF" round
                       @click="handleBtnClick({type:'charge'})">立即充值
            </el-button>
            <el-button type="primary" size="large" class="w-[95px] text-[#3721FF]"
                       color="rgba(55,33,255,0.03)" style="color: #3721FF" round
                       @click="handleBtnClick({type:'item'})"
            >账户明细
            </el-button>
          </div>

          <div
            class="w-[100%] h-[54px] bg-[rgba(55,33,255,0.03)] flex relative left-[-20px] bottom-[-20px] items-center"
            v-style="`width:calc(100% + 40px)`">

            <div class="flex-center w-[50%] text-[#524E74]">
              <div class="bg w-[16px] h-[16px] mr-[5px]"
                   style="background-image: url(https://img.alicdn.com/imgextra/i2/801089336/O1CN01lmnO3b2IpwkAzzI02_!!801089336.png)"></div>
              租位数量：{{ companyInfo.accountCount || 0 }}个
            </div>

            <div class="line w-[1px] h-[16px] bg-[rgba(82,78,116,0.1)]"></div>

            <div class="flex-center w-[50%] text-[#524E74]">
              <div class="bg w-[16px] h-[16px] mr-[5px]"
                   style="background-image: url(https://img.alicdn.com/imgextra/i3/801089336/O1CN01rl5ohu2IpwkBJjhjN_!!801089336.png)"></div>
              剩余流量：{{ Math.floor(((companyInfo.traffic || 0) / 1024) * 100) / 100 }}MB
            </div>

          </div>

        </div>

        <div class="mt-[30px]">
          <div class="text-[20px]">其他服务</div>

          <div class=" flex flex-wrap mt-[20px]" v-style="`gap:15px;`">
            <div v-for="(item,index) in otherConfig" :key="index" class="bg w-[231px] h-[64px]"
                 @click="handleBtnClick({type:item.code})"
                 v-style="`background-image:url(${ item.url })`"
            >

            </div>
          </div>

        </div>

      </div>
    </div>


  </div>
</template>
<script setup lang="ts">
import router from "@/router";

import {FeeApi} from "@/api/fee";
import {getCompanayInfo, getPackageList1} from "@/api/system/tenant";
import dayjs from "dayjs";

const emit = defineEmits(['execute']);

const isGetData = ref(false)

const countInfo = ref({
  balance: '0'
})

const companyInfo = ref({})

const config = ref([])

const activeConfig = ref(0)

const otherConfig = ref([
  {
    url: "https://img.alicdn.com/imgextra/i2/801089336/O1CN013R3f492IpwkBjRa3T_!!801089336.png",
    code: "bill"
  },
  {
    url: "https://img.alicdn.com/imgextra/i3/801089336/O1CN01xoH1zh2IpwkCV54KJ_!!801089336.png",
    code: "flow"
  },
  {
    url: "https://img.alicdn.com/imgextra/i2/801089336/O1CN01HKgNEQ2IpwkBnR0Sy_!!801089336.png",
    code: "seat"
  },
  {
    url: "https://img.alicdn.com/imgextra/i3/801089336/O1CN01EI4tlo2IpwkBfwQP4_!!801089336.png",
    code: "item"
  },
  {
    url: "https://img.alicdn.com/imgextra/i1/801089336/O1CN013ZMKvn2Ipwk9ycdaj_!!801089336.png",
    code: "buyFlow"
  }
])


const initPromise = async () => {
  let res = await Promise.all([FeeApi.getBalance(), getCompanayInfo(), getPackageList1()]);

  let balance = res[0].balance || 0;
  balance = Math.round(balance)/100
  countInfo.value = {
    ...res[0],
    balance: balance.toString()
  }

  companyInfo.value = res[1];

  console.log(res[2])

  config.value = res[2].map(item=>{
    return {
      ...item,
      discountPrice:Math.round(item.discountPrice)/100,
      originalPrice:Math.round(item.originalPrice)/100
    }
  })

  isGetData.value = true;
}

const handleBtnClick = (e) => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  charge(){
    router.push('/fee/fee/charge')
  },
  module({index}) {
    activeConfig.value = index;
  },
  bill() {
    router.push('/fee/fee/bill')
  },
  flow() {
    router.push('/fee/fee/flow')
  },
  item() {
    router.push('/fee/fee/item')
  },
  seat() {
    //购买席位
    router.push('/fee/fee/seat')
  },
  //购买流量
  buyFlow() {
    router.push('/fee/fee/flow-buy')
  },
  payNow() {
    emit('execute', {
      type: 'payNow',
      package: config.value[activeConfig.value]
    })
  }

}


onMounted(() => {
  initPromise()
})
</script>
<style lang="scss" scoped>
.topModule {
}
</style>
